import React from 'react';

import { Upload, message, Button, Table, Popconfirm, Card, Breadcrumb } from 'antd';//使用组件
import { UploadOutlined } from '@ant-design/icons';//使用图标  可以自己切换
import { useHistory } from "react-router-dom";//引入获取跳转携带的参数 方法

import { useAmendAddress } from "../../hook/amendAddress.js";
//拿到token方法
import userApi from "../../api/users.js"



//渲染到输入框
export default () => {
    const history = useHistory();
    // 修改数据的hoock
    const [{ _id, name, Address, Image }, { delImag }] = useAmendAddress()
    //获取token
    const token = userApi.getToken();
    const rows = [{
        _id: _id,
        name: name,
        Address: Address,
        Image: Image
    }]

    function confirm(recored) {
        delImag(recored)
        message.success('yes');

    }

    function cancel(e) {
        console.log(e);
        message.error('Click on No');
    }
    //表头
    const columns = [
        {
            title: '自提点名称',
            dataIndex: 'name',
            width: "10%",

        },
        {
            title: '商户照片',
            dataIndex: 'Image',
            width: '10%',
            // 判断如果图片后面有值就返回图片 没有就返回请上传图片
            render: (text, recored, index) => {
                if (Image === "") {
                    return <div style={{ color: "red", fontWeight: "bold" }}>请上传图片</div>

                } else {
                    return <Popconfirm
                        title="此操作不可恢复是否确定删除?"
                        onConfirm={() => confirm(recored)}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <img src={`/res/${recored.Image}`} style={{ height: 100, width: 100 }} />
                    </Popconfirm>
                }
            }
        },
        {
            title: "按钮",
            dataIndex: "button",
            width: "10%",
            render: () => {
                return <div style={{ marginLeft: 30 }}> <Upload {...props}>
                    <Button icon={<UploadOutlined />}>上传</Button>
                </Upload></div>
            }
        }

    ]


    const props = {//props是配置 Upload 组件的参数，
        name: 'file',
        //请求到资源服务器的地址
        action: '/res/address/addres_addphoto',
        headers: {
            authorization: 'authorization-text',
        },
        //data 是自定义需要的一些额外参数
        data: {
            _id: _id,
            token: token,
        },

        onChange(info) {
            if (info.file.status !== 'uploading') {

                message.success(`上传成功`, 1);
                history.push("/info/address")
            }
            if (info.file.status === 'done') {

            } else if (info.file.status === 'error') {
                message.error(`${info.file.name} file upload failed.`);
            }
        },

    };


    return (    //页面使用   Upload 组件
        //props 刚刚配置的 参数
        <>

            <Card style={{ display: "flex", flexDirection: "column" }}>
                <Breadcrumb>
                    <Breadcrumb.Item>主页</Breadcrumb.Item>
                    <Breadcrumb.Item>自提点</Breadcrumb.Item>
                    <Breadcrumb.Item>
                        <a href="/#/info/uploadAdress" style={{ fontSize: "16px", color: "black" }}>商户图片上传</a>
                    </Breadcrumb.Item>
                </Breadcrumb>

                <Card title="图片上传" style={{ marginTop: 50, height: 800 }}>
                 
                        <Table
                        size="middle"
                            pagination={false}
                            dataSource={rows}
                            columns={columns}
                            rowKey={(record) => record._id}
                            style={{ width: 800, marginTop: 50 }}
                        />
 

                </Card>
            </Card>


        </>
    )
}


